<template>
  <view class="timer-container">
    <!-- 单次定时器相关按钮 -->
    <button @click="onSetTimeCall">单次定时器setTimeout</button>
    <button @click="() => onSetTimeCallxy(userName, password)">带参数setTimeout</button>
    <button @click="onTimeoutClear" type="warn">取消单次定时器</button>

    <!-- 周期定时器相关按钮 -->
    <button @click="onInterval" type="primary">周期打印setInterval</button>
    <button @click="onClearInterval" type="warn" plain="true">取消周期打印</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userName: 'czy',      
      password: '666',     
      timeoutID: null,       
      count: 0,              
      intervalID: null       
    };
  },
  methods: {
    
    onSetTimeCall() {
      console.log("触发基础单次定时器...");
      // 保存定时器ID，用于后续取消
      this.timeoutID = setTimeout(() => {
        console.log("我延时3秒才会打印");
      }, 3000); // 延迟时间：3000毫秒（3秒）
    },
/**
     * 带参数的单次定时器：2秒后执行并接收参数
     * @param {string} name - 用户名参数
     * @param {string} pwd - 密码参数
     */
    
    onSetTimeCallxy(name, pwd) {
      console.log(`触发带参数单次定时器，原始参数：name=${name}, pwd=${pwd}`);
      // 向回调传递参数（setTimeout第3+参数为回调入参）
      this.timeoutID = setTimeout((x, y) => {
        console.log(`延时2秒后接收参数：x=${x}, y=${y}`);
      }, 2000, name, pwd); // 延迟时间：2000毫秒（2秒）
    },

    /**
     * 取消已设置的单次定时器
     */
    onTimeoutClear() {
      if (this.timeoutID) {
        clearTimeout(this.timeoutID);
        console.log(`单次定时器（ID: ${this.timeoutID}）已取消`);
        this.timeoutID = null; // 清空ID，避免重复取消
      } else {
        console.log("当前没有活跃的单次定时器");
      }
    },

    /**
     * 周期定时器：每秒执行一次，计数递增
     */
    onInterval() {
      console.log("触发周期定时器（每秒执行一次）...");
      // 每秒执行一次回调，更新计数并打印
      this.intervalID = setInterval(() => {
        this.count++;
        console.log(`周期打印 count: ${this.count}`);
      }, 1000); // 间隔时间：1000毫秒（1秒）
    },

    /**
     * 取消已设置的周期定时器
     */
    onClearInterval() {
      if (this.intervalID) {
        clearInterval(this.intervalID);
        console.log(`周期定时器（ID: ${this.intervalID}）已取消`);
        this.intervalID = null; // 清空ID，避免重复取消
      } else {
        console.log("当前没有活跃的周期定时器");
      }
    }
  }
};
</script>

<style>
	
</style>